import { Button, Form, Input } from "antd";
import { verifycodeApi } from "../../../apis/login";
import { useNavigate } from "react-router-dom";
import { RegisterInter } from "../../../apis/types";
import { useState } from "react";
type FieldType = {
  email?: string;
  password?: any;
  conpassword?: string;
  username?: string;
};
function SignUp() {
  // 路由跳转
  const navto = useNavigate();
  function to(url: string,values?:RegisterInter) {
    if(values){navto(url,{state:values})}
    else{navto(url)}
  }
  // 点击确认按钮
  let [Loading,setLoading] = useState<boolean>(false)
  const onFinish = (values: any) => {
    setLoading(true)
    verifycodeApi(values).then((res:any)=>{
      if(res.code === 200){
        let code = res.result.code
        delete values.conpassword
        to('/login/verifycode',{...values,code})
      }
      setLoading(false)
    })
  }
  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  }
  return (
    <>
      <div className="logintitle">
        <img src="../../../../public/login/3.svg" alt="" />
        <span>注册</span>
      </div>
      <Form
        layout="vertical"
        className="Form"
        name="basic"
        style={{ width: "100%" }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item<FieldType>
          label={
            <label style={{ color: "#fff", fontWeight: 600 }}>Email</label>
          }
          name="email"
          rules={[{ required: true, message: "Please input your email!" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item<FieldType>
          label={<label style={{ color: "#fff", fontWeight: 600 }}>密码</label>}
          name="password"
          rules={[{ required: true, message: "Please input your password!" }]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item<FieldType>
          label={
            <label style={{ color: "#fff", fontWeight: 600 }}>确认密码</label>
          }
          name="conpassword"
          rules={[{ required: true, message: "Please confirm your password!" }]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item<FieldType>
          label={
            <label style={{ color: "#fff", fontWeight: 600 }}>用户名</label>
          }
          name="username"
          rules={[{ required: true, message: "Please input your username!" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" block loading={Loading}>
            <label style={{ fontWeight: "bold" }}>立即注册</label>
          </Button>
        </Form.Item>
      </Form>
      <div className="forgetPass">
        单击“立即注册”即表示您同意我们的用户协议、隐私政策和Cookie政策。
      </div>
      <div className="more">
        已有账号?
        <span className="toregister" onClick={() => to("/login/sign_in")}>
          去登录
        </span>
      </div>
    </>
  );
}

export default SignUp;
